<template>
    <view class="content" v-if="!loading">
        <!--  -->
        <view class="headerBg">
            <uv-navbar title="商品购买" leftIconColor="#fff" @leftClick="back"
                :titleStyle="'color:#fff;font-size: 38rpx;font-weight:bold'" bgColor="rgba(255,255,255,0)"></uv-navbar>
            <view class="" :style="'height:'+(menuTop+menuHeight)+'px;'"> </view>
            <image style=" width: 100%;position: absolute; left: 0;top: 0;" class="bg"
                src="/static/images/middle/bg.jpg" mode="widthFix"></image>
            <view class="goods">
                <view class="goodsName align-center">
                  {{detailData.name}} <text class="tag" v-if="detailData.time_all">{{detailData.time_all}}营业</text>
                </view>
                <view class="tagList align-center justify-start">
                    <text class="" v-for="(i,n) in detailData.label_arr" :key="n">{{i}}</text>
                </view>
                <view class="address justify-between align-start">
                    <text>地址：</text>
                    <view class="clamp2 flex1">
                        {{detailData.address}} 

                    </view>
                    <image class="mr15 " @click="$utils.dh(detailData.name, detailData.pointlat,detailData.pointlng)"  style="margin-left: 30rpx;" src="/static/images/middle/i8.png" mode="widthFix">
                    </image>
                    <image @click="$utils.call(detailData.mobile)"  src="/static/images/middle/i9.png" mode="widthFix"></image>
                </view>
            </view>
        </view>
        <view class="storeCate">
            <view class="storeGoods">
                本店商品
            </view>
            <uv-vtabs :chain="chain" :list="list" :height="height"
            @scrolltolower="loadMore"
                :barItemActiveStyle='{fontWeight:"Bold",color:"#333"}'
                :bar-item-active-line-style="{background:'transprant'}" :barItemBadgeStyle="{right:'20px',top:'12px'}"
                @change="change">
                <uv-vtabs-item>
                    <view class="item justify-between" v-for="(item2,index2) in list2" :key="index2">
                        <image :src="item2.image" mode=""></image>
                        <view class="flex1 flex-col justify-between">
                            <view class="item-title">
                                {{item2.title}}
                            </view>
                            <view class="item-content mb10 justify-between align-center">
                                <text>￥{{item2.price}}</text>
                                <view v-if="item2.is_sku" @click="openRole(item2)" class="choseRule">
                                    选规格
                                </view>
                                <view v-else class="align-center">
                                    <uv-icon @click="delCart(item2)" color="#FF4345" size="24" name="minus-circle"> </uv-icon> <text
                                        class="mlr10">{{compoutedNum(item2)}}</text><uv-icon size="24" color="#FF4345"
                                        name="plus-circle-fill" @click="addCart(item2)" > </uv-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="" v-if="list2.length==0">
                        <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
                    </view>
                </uv-vtabs-item>
            </uv-vtabs>
        </view>
        <view class="cart justify-between align-center">
            <view class="cartBox" @click="showCartList">
                <image src="/static/images/middle/cart.png" mode="widthFix"></image>
                <text class="cartNum">{{chosedArr.length}}</text>
            </view>

            <view class="buybtn" @click="pay">
                立即下单
            </view>
        </view>
        <uv-popup ref="popup" bgColor="none" mode="center">
            <view class="flex-col align-center">
                <view class="bgWhite popcontent flex-col justify-between">
                    <view class="ptb25 plr18 flex1">
                        <view class="mb20 popTitle">
                            {{roleAttr.title}}
                        </view>
                        <view class="roleChose popTitle">
                            温度
                        </view>
                        <view class="justify-start  attrList">
                            <view @click="attrData=0" :class="attrData==0?'active':''">
                                常温
                            </view>
                            <view @click="attrData=1" :class="attrData==1?'active':''">
                                冷藏
                            </view>
                        </view>
                        <view class="justify-between align-center mt10">
                        <text class="popTitle">数量：</text> 
                         <view class="align-center">
                             <uv-icon color="#FF4345"   @click="delCarts()" size="24" name="minus-circle"> </uv-icon> <text
                                 class="mlr10">{{goods_num}}</text> <uv-icon @click="addCarts()" size="24" color="#FF4345"
                                 name="plus-circle-fill"> </uv-icon>
                         </view>
                        </view>
                    </view>
                    <view class="attr">
                        已选规格： <text>{{attrData?'冷藏':'常温'}}</text>
                    </view>
                    <view class="justify-between align-center allMoney">
                        <view class="money">
                            总计 <text>￥{{roleAttr.price}}</text>
                        </view>
                        <view class="addcart" @click="addRoleCart()">
                            +加入购物车
                        </view>
                    </view>
                </view>
                <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
            </view>
        </uv-popup>
        <uv-popup ref="cartpopup" zIndex="999" mode="bottom" round="16">
            <view class="flex-col align-center plr13 pt22 ">
               <view class="justify-between align-center pb15" style="width: 100%; border-bottom: 1px solid #F3F3F3">
                   <view class="" style="font-weight: bold;font-size: 34rpx;color: #333333;">
                       购物车
                   </view>
                   <view @click="resetCart" class="delCart align-center" style="font-size: 25rpx;color: #444444;">
                       <uv-icon  color="#8B8B8B" size="24" name="trash"> </uv-icon>
                        清空购物车
                   </view>
               </view>
               <view class="cartItem  justify-between" v-for="(item2,index2) in chosedArr" :key="index2">
                   <image :src="item2.image" mode=""></image>
                   <view class="flex1 flex-col justify-between" style="border-bottom: 1px solid #F3F3F3;">
                       <view class="item-title">
                           {{item2.title}}
                       </view>
                       <view class="item-content mb10 justify-between align-center">
                           <text>￥{{item2.price}}</text>
                          <view v-if="item2.sku_type" class="choseRule">
                               {{item2.sku_type}}
                           </view>
                           <view class="align-center">
                               <uv-icon color="#FF4345"   @click="delCart(item2)" size="24" name="minus-circle"> </uv-icon> <text
                                   class="mlr10">{{item2.goods_num}}</text> <uv-icon @click="addCart(item2)" size="24" color="#FF4345"
                                   name="plus-circle-fill"> </uv-icon>
                           </view>
                       </view>
                   </view>
               </view>
               <view class="ft11 mt15" style="color: #888;">
                   下单无需立即支付,最后统一到前台结账！
               </view>
               <view class="" style="height: 130rpx;width: 100%;">
                   
               </view>
              
            </view>
        </uv-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {

                chain: false,
                value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,

                detailData:{},
                categoryId: "",
                menuTop: uni.getStorageSync('menuInfo').menuTop,
                menuHeight: uni.getStorageSync('menuInfo').menuHeight,
                list2:[],
                list: [],
                chosedArr:[],
                windowHeight: uni.getStorageSync('menuInfo').windowHeight,
                height: 0,
                attrData: 0,
                id:'',
                table_id:"",
				roleAttr:{},
                goods_num:1,
                loading:false,
                page:1,
                noMore:false


            }
        },

        onReady() {
            // 模拟接口请求数据

            this.height = (this.windowHeight * 2 - 570) / 2


        },
        onLoad(opt) {
            if(opt.id) this.id = opt.id
            if(opt.table_id) this.table_id=opt.table_id
            this.getDetail()
            this.getCategory()
            this.getGoodsCart()
            // this.getCate(index)  
            // this.$refs.cartpopup.open()

        },
        
        methods: {
                
            compoutedNum(item2){
                
                if(this.chosedArr.length){
                    let id= item2.goods_id?item2.goods_id:item2.id
                 let datas =    this.chosedArr.find(item=> item.goods_id==id)
                    console.log(datas)
                return datas?.goods_num ||0
                }else{
                    return 0
                }
            },
            
            async getGoodsCart(){
             let  data=await this.$api.shopgoodsCart({shop_id:this.id})  
             console.log(data)
             this.chosedArr=data.list
            },
            async getCategory(){
             let  data=await this.$api.getShopCategory({shop_id:this.id})  
             console.log(data)
             this.list = data.list
             this.cate_id=data.list[0].id
             this.page=1
             this.noMore=false
             this.getStoreGoods()
            },
            loadMore(){
            if(this.noMore) return
              this.page++  
              this.getStoreGoods()
            },
            async getStoreGoods(){
             let  data=await this.$api.getShopGoods({shop_id:this.id,cate_id:this.cate_id,page:this.page})  
             if(data.list.length<10) this.noMore=true
             this.list2=[...this.list2,...data.list]
             
            },
            async getDetail(){
                this.loading=true
             let  data=await this.$api.getShopDetail({id:this.id})  
             console.log(data)
             this.detailData= data.detail
             this.loading=false
            },
			openRole(item) {
				console.log(item)
				this.roleAttr = item
			    this.$refs.popup.open()
			},	
            close() {
                this.$refs.popup.close()
            },
            showCartList(){
                this.$refs.cartpopup.open()
            },
            click(e) {
                console.log(e)
            },
            async getQuestion(index) {
                const data = await this.$api.questionList()
                console.log(data)
                this.list = data.list
            },

            toMain(item) {
                /*  uni.navigateTo({
                      url: '/pages/problemMain/index?id=' + item.id
                  }) */
            },
            back() {
                uni.navigateBack()
            },
            change(index) {
                console.log('选项改变：', index)
                this.value = index;
                this.cate_id=this.list[index].id
                this.list2=[]
                   this.getStoreGoods()
            },
            CartDel(){
                
            },
			addRoleCart(){
					if(this.loading) return
					this.loading=true
					this.$api.shopgoodsAdd({goods_num:this.goods_num, goods_id:this.roleAttr.id,sku_type:this.attrData==1?'冷藏':"常温"}).then(res=>{
					    console.log(res)
					    this.loading=false
						this.$refs.popup.close()
					    this.getGoodsCart()
					}) 
			},
            delCarts(){
                if(this.goods_num>1){
                    this.goods_num--  
                }
                
            },
            addCarts(){
              this.goods_num++  
            },
             addCart(item){
                if(this.loading) return
                this.loading=true
                let num = this.compoutedNum(item)
                console.log(num)
                if(num==0){
                    this.$api.shopgoodsAdd({goods_id:item.goods_id?item.goods_id:item.id}).then(res=>{
                        console.log(res)
                        this.loading=false
                        this.getGoodsCart()
                    }) 
                }else{
                   num++
                    this.$api.shopgoodsEdit({goods_id:item.goods_id?item.goods_id:item.id,goods_num:num}).then(res=>{
                        console.log(res)
                        this.loading=false
                        this.getGoodsCart()
                    }) 
                }
               
            },
                
            delCart(item){
                if(this.loading) return
                this.loading=true
                let num = this.compoutedNum(item)
                if(num>1){
                    num--
                    
                     this.$api.shopgoodsEdit({goods_id:item.goods_id?item.goods_id:item.id,goods_num:num}).then(res=>{
                         console.log(res)
                         this.loading=false
                         this.getGoodsCart()
                     })
                }else{
                    this.$api.shopgoodsDelete({goods_id:item.goods_id?item.goods_id:item.id}).then(res=>{
                        console.log(res)
                        this.loading=false
                        this.getGoodsCart()
                    })
                    this.loading=false
                }
               
            },
            async resetCart(){
                let res =  await this.$api.shopgoodsDel({shop_id:this.id})
                console.log(res)
                if(res.code==1){
                    uni.showToast({
                        title:'操作成功'
                    })
                    this.chosedArr=[]
                     this.$refs.cartpopup.close()   
                    
                }else{
                    uni.showToast({
                        title:res.msg,
                        icon:"none"
                    })
                }
            },
            async pay(){
                if(!this.table_id) return this.$utils.msg('请扫码下单')
                if(!this.chosedArr.length) return  uni.showToast({
                        title:'请先添加商品到购物车',
                        icon:"none"
                    }) 
                    let str = JSON.stringify(this.chosedArr)
                    let res =  await this.$api.shopgoodsCreate({shop_id:this.id,goods_list:str,table_id:this.table_id})
                    console.log(res)
                    if(res.code==1){
                        uni.showToast({
                            title:'操作成功'
                        })
                        this.chosedArr=[]
                         this.$refs.cartpopup.close()   
                         setTimeout(()=>{
                           uni.navigateTo({
                               url:'/pages/order/index'
                           })  
                         },800)
                    }else{
                        uni.showToast({
                            title:res.msg,
                            icon:"none"
                        })
                    }
                
            }
        }
    }
</script>
<style scoped lang="scss">
    .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        height: 87rpx;
    }

    .item {
        padding: 22rpx 20rpx 22rpx 32rpx;
        font-weight: bold;

        color: #333333;

        image {
            width: 220rpx;
            height: 220rpx;
            border-radius: 15rpx;
            margin-right: 20rpx;
        }

        &-title {
            font-size: 32rpx;
        }

        &-content {

            font-size: 24rpx;
        }

        .choseRule {
            width: 99rpx;
            height: 46rpx;
            background: #FF4345;
            border-radius: 15rpx;
            text-align: center;
            line-height: 46rpx;
            font-size: 26rpx;
            color: #FFFFFF;
        }

    }

    .gap {
        padding: 0 30rpx;
    }

    .swiper {
        image {
            width: 100%;
            height: 300rpx;
        }


    }

    .noticeItem {
        background: #FFFFFF;
        box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(254, 50, 98, 0.13);
        border-radius: 20rpx;

        image {
            width: 39rpx;
            margin-right: 20rpx;
        }

        .time {
            font-size: 28rpx;
            color: #555555;
        }

        .noticeTitle {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;

        }

        .clamp2 {
            font-size: 24rpx;
            color: #888888;
            line-height: 40rpx;
        }

        .line {
            background-color: #E2E2E2;
            height: 1rpx;
            width: 100%;
        }

        .bottom {
            font-size: 24rpx;
            color: #999999;
        }
    }

    .goods {
        position: relative;
        z-index: 9;
        margin: 50rpx 25rpx 0;
        font-size: 24rpx;
        color: #FFFFFF;

        .goodsName {
            font-weight: bold;
            font-size: 34rpx;

        }

        .tag {
            min-width: 121rpx;
            text-align: center;
            height: 33rpx;
            background: #FEAB61;
            border-radius: 3rpx;
            display: inline-block;
            font-size: 22rpx;
            line-height: 33rpx;
            font-weight: 400;
            margin-left: 10rpx;
            box-sizing: border-box;
        }
    }

    .tagList {
        flex-wrap: wrap;
        margin: 14rpx 0 24rpx 0;

        text {
            margin-top: 10rpx;
            display: block;
            min-width: 118rpx;
            box-sizing: border-box;
            padding: 0 27rpx;
            line-height: 40rpx;
            height: 40rpx;
            background: rgba(0, 0, 0, .15);
            border-radius: 3rpx;
            margin-right: 6rpx;
            color: #fff;
            text-align: center;
            font-size: 22rpx;

        }
    }

    .address {
        image {
            width: 52rpx;
        }
    }

    .storeCate {
        background-color: #fff;
        border-radius: 35rpx 35rpx 0 0;
        position: relative;
        margin-top: -30rpx;
    }

    .storeGoods {
        font-weight: bold;
        font-size: 32rpx;
        line-height: 50rpx;
        color: #333333;
        position: relative;
        display: inline-block;
        line-height: 80rpx;
        margin-left: 32rpx;
    }

    .storeGoods::after {
        width: 41rpx;
        height: 8rpx;
        background: #E72658;
        border-radius: 3rpx;
        position: absolute;
        clear: both;
        content: '';
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .cart {
        width: 700rpx;
        height: 104rpx;
        background: #232426;
        position: fixed;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 18rpx;
        border-radius: 50rpx;
        z-index: 9999;
        image {
            width: 72rpx;
        }

        .cartBox {
            position: relative;
            width: 72rpx;
            height: 72rpx;
            margin-left: 54rpx;

            .cartNum {
                display: inline-block;
                width: 34rpx;
                height: 34rpx;
                position: absolute;
                top: 0;
                right: -20rpx;
                background: #FF4345;
                color: #fff;
                text-align: center;
                border-radius: 50%;
                font-size: 28rpx;
            }
        }

        .buybtn {
            width: 214rpx;
            border-radius: 0 50rpx 50rpx 0;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
            background-color: #00C584;
            line-height: 104rpx;
        }
    }

   
    .cartItem{
        width: 100%;
        margin-top: 16rpx;
        image{
            width: 126rpx;
            height: 128rpx;
            margin-right: 23rpx;
            border-radius: 16rpx;
        }
    }
</style>
<style>
    .uv-tabs__wrapper__nav {
        justify-content: space-between;
    }
</style>